<template>
  <div class="box">
    <div class="header">
      <van-nav-bar title="购物车" left-arrow @click-left="$router.back()" />
    </div>
    <div class="content">
      <van-swipe-cell v-for="item in store.cartList" :key="item.id">
        <van-card
          :num="item.count"
          :price="item.price"
          :title="item.title"
          :thumb="item.image"
        >
        <template #tag>
<van-checkbox v-model="item.checked"></van-checkbox>
        </template>
          <template #footer>
<van-stepper v-model="item.count" />
        </template>
        </van-card>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" style="height:100%;" @click="deleteItem(item.id)"/>
        </template>
      </van-swipe-cell>
    </div>
    <van-submit-bar :price="store.totalPrice*100" button-text="结算" @submit="onSubmit" >
  <van-checkbox v-model="allChecked">全选</van-checkbox>
</van-submit-bar>
  </div>
</template>

<script setup>
import {computed} from 'vue'
import {useCounterStore} from '@/stores/counter'
const store = useCounterStore()
import shake from  '@/utils/shake'
import {useRouter} from 'vue-router'
const router =useRouter()
const deleteItem=(id)=>{
    store.delItem(id)
}
const allChecked=computed({
    get(){
        if(store.cartList.length==0)
        {
            return false
        }else
        {
            return store.cartList.every(item=>item.checked==true)
        }
    },
    set(newValue){
        store.cartList.forEach(item=>item.checked=newValue)
    }
})

const onSubmit =shake(()=>{
  router.push('/order')
},2000)
</script>

<style lang="scss" >
.van-submit-bar {
    bottom: 50px;
}
</style>